<template>
  <div>
    <MainLayout></MainLayout>
  </div>
</template>

<script>
import { reactive, toRefs, provide, onMounted, ref } from 'vue'
import MainLayout from '@/components/common/MainLayout.vue'
import { caseList } from '@/utils/api.js'

export default {
  components: { MainLayout },
  setup() {
    const state = reactive({
      count: 10000,
    })

    // B.查询相关
    // 查询字段信息
    const searchForm = [
      {
        label: '关键字',
        field: 'search',
        component: 'Input',
      },
      {
        label: '用例名称',
        field: 'config__name',
        component: 'Input',
      },
      {
        label: '性别',
        field: 'sex',
        component: 'Select',
        list: [
          { id: '1', name: '男' },
          { id: '2', name: '女' },
        ],
      },
    ]

    // 查询字段响应式变量
    const queryParam = reactive({
      search: '',
      config__name: '',
      sex: '1',
    })

    // 按钮操作
    const handleApiOpt = (row, type) => {
      if (type === 1) {
        alert('新增按钮调用了')
      }
    }
    // 列表数据
    const tableData = ref([])
    // 总数据➗每页显示多少条=页数（+1）

    const limit = ref(4) // 每页显示多少条
    const page = ref(1) // 第几页
    const total = ref(0) // 总数据
    const getData = (limit, page, param) => {
      caseList({ limit, page, ...param }).then((res) => {
        // 数据列表
        tableData.value = res.result.data
        // 总数据条数
        total.value = res.result.total
      })
    }

    // 页面加载完成，调用获取数据方法
    onMounted(() => {
      getData(limit.value, page.value)
    })

    const columns = [
      {
        title: '用例名称', //列的标题
        field: 'config.name', //数据的字段名
        width: 120,
      },
      {
        title: '所属项目',
        field: 'config.project.name',
        width: 100,
      },
      {
        title: '文件路径',
        field: 'file_path',
        width: 120,
      },
      {
        title: '创建时间',
        field: 'create_datetime',
        width: 140,
      },
      {
        title: '修改时间',
        field: 'update_datetime',
        width: 140,
      },
    ]
    // provide用于提供数据（子组件、孙子组件等等，都可以或取到数据）
    // 提供：普通变量、函数、响应式变量都可以
    provide('searchForm', searchForm)
    provide('queryParam', queryParam)
    provide('handleApiOpt', handleApiOpt)
    provide('tableData', tableData)
    provide('columns', columns)
    provide('limit', limit)
    provide('page', page)
    provide('total', total)
    provide('getData', getData)
    return {
      ...toRefs(state),
    }
  },
}
</script>

<style lang="scss" scoped></style>
